<template>
  <div class="home">
    <swiper></swiper>
    <div class="container">
      <div class="search-box hidden-sm hidden-md hidden-lg">
        <input type="text" @keyup="debouncedSearch" placeholder="搜索" v-model="searchVal" />
        <div class="avatar card">
          <div class="avatar-top">
            <img src="static/img/1.jpg" width="100%" />
            <div class="avatar-pic"></div>
          </div>
          <div class="avatar-text">
            <p>可以自行选择查看小程序，CSDN，或简书</p>
            <ul class="row">
              <li class="col-xs-6">
                <img src="static/img/wechat.jpg" width="137" />
              </li>
              <li class="col-xs-6">
                <a href="https://blog.csdn.net/weixin_29491885?t=1" target="_blank">
                  <img src="static/img/icon/csdn.png" width="40" />CSDN
                </a>
                <a href="https://www.jianshu.com/u/39470f08f477" target="_blank">
                  <img src="static/img/icon/jian.png" width="40" />简书
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-8">
          <blog-list
            v-for="post in list"
            :key="post.id"
            :id="post.id"
            :summary="post.summary"
            :date="post.create_time"
            :title="post.title"
            :picture="post.picture"
          ></blog-list>
        </div>
        <div class="col-sm-4">
          <div class="search-box hidden-xs">
            <input type="text" @keyup="debouncedSearch" placeholder="搜索" v-model="searchVal" />
            <div class="avatar card">
              <div class="avatar-top">
                <img src="static/img/1.jpg" width="100%" />
                <div class="avatar-pic"></div>
              </div>
              <div class="avatar-text">
                <p>众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</p>
                <img src="static/img/wechat.jpg" width="45%" style="margin-right:8%" />
                <img src="static/img/qr-code.png" width="45%" />
              </div>
            </div>
          </div>
          <series-list></series-list>
          <labels-List></labels-List>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "base/swiper";
import lodash from "lodash";
export default {
  data() {
    return {
      url: "/Essay/essay_list/9",
      list: [],
      searchUrl: "/Essay/search_essay/",
      searchVal: "",
      blogList: []
    };
  },
  created() {
    this.debouncedSearch = lodash.debounce(this.search, 500);
    this.getList();
  },
  methods: {
    search() {
      this.searchVal = this.searchVal.trim();
      if (this.searchVal) {
        this.$http.get(this.domain + this.searchUrl + this.searchVal).then(
          res => {
            if (res.data.length > 0) {
              this.webUtil.getPic(res.data, 4).then(blog => {
                this.list = blog;
              });
            } else {
              alert(
                '没有找到与"' +
                  this.searchVal +
                  '"相关的文章,请尝试使用更宽泛的关键词。'
              );
              this.list = this.blogList;
            }
          },
          res => {
            this.$router.push({ path: "/error" });
          }
        );
      } else {
        this.list = this.blogList;
      }
    },
    getList() {
      this.$http.get(this.domain + this.url).then(
        res => {
          this.webUtil.getPic(res.data, 1).then(blog => {
            this.blogList = blog;
            this.list = this.blogList;
          });
        },
        res => {
          console.log("error");
        }
      );
    }
  },
  components: {
    Swiper,
    BlogList: resolve => {
      require(["base/blog-list"], resolve);
    },
    seriesList: resolve => {
      require(["base/series-list"], resolve);
    },
    labelsList: resolve => {
      require(["base/label-list"], resolve);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped rel="stylesheet/stylus" lang="stylus">
.home {
  padding-bottom: 20px;
}

.avatar-top {
  position: relative;
}

.avatar-pic {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, 50%, 0);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgb(255, 255, 255);
  background: #f8f8f9 url('../../../static/img/logo.png') no-repeat center / cover;
}

.avatar-text {
  padding: 45px 20px 20px;
}

.avatar a {
  color: #607d8b;
  display: block;
  margin-top: 14px;
  font: 500 16px / 40px 'Helvetica Neue';
}

.avatar a>img {
  margin-right: 8px;
}

.search-box input {
  display: block;
  margin-top: 30px;
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 0 12px;
  outline: none;
  background: transparent;
}
</style>
